<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>纽扣图生成工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        .form-section {
            margin-bottom: 20px;
        }
        label {
            display: inline-block;
            width: 120px;
        }
        select, button, input {
            margin-bottom: 10px;
        }
        img {
            max-width: 300px;
            display: block;
            margin-top: 10px;
        }
        .log {
            background: #f2f2f2;
            padding: 10px;
            border: 1px solid #ccc;
            white-space: pre-wrap;
        }
        .loading {
            color: orange;
            font-style: italic;
        }
    </style>
</head>
<body>
<h1>纽扣图生成工具</h1>

<div class="form-section">
    <label>材料:</label>
    <select id="material">
        <option>树脂</option>
        <option>木质</option>
        <option>锌合金五金</option>
        <option>牛角</option>
        <option>果实</option>
        <option>贝壳</option>
        <option>ABS</option>
        <option>铜件</option>
    </select>
    <br>

    <label>颜色:</label>
    <select id="color">
        <option>红</option>
        <option>白</option>
        <option>黑</option>
        <option>绿</option>
        <option>蓝</option>
    </select>
    <br>

    <label>风格:</label>
    <select id="style">
        <option>复古</option>
        <option>现代</option>
        <option>工业</option>
        <option>奢华</option>
    </select>
    <br>

    <label>形状:</label>
    <select id="shape">
        <option>方形</option>
        <option>圆形</option>
        <option>心形</option>
        <option>异形</option>
    </select>
    <br>

    <label>孔数:</label>
    <select id="holenum">
        <option>一孔</option>
        <option>两孔</option>
        <option>四孔</option>
    </select>
    <br>


    <button onclick="generatePrompt()">1. 生成描述语句</button>
    <button onclick="generatePromptAI()">2. 生成ai描述语句</button>
    <button onclick="requestImage()">3. 请求创建图片</button>
    <button onclick="getImage()">4. 获取生成结果</button>
</div>

<div class="form-section">
    <label>初始描述语句:</label>
    <div id="promptDisplay1" class="log"></div>
</div>

<div class="form-section">
    <label>AI描述语句:</label>
    <div id="promptDisplay2" class="log"></div>
</div>

<div class="form-section">
    <label>任务 ID:</label>
    <div id="taskIdDisplay" class="log"></div>
</div>

<div class="form-section">
    <label>图片链接:</label>
    <div id="imageUrl" class="log"></div>
    <img id="previewImage" src="" alt="生成图像" />
</div>

<script>
    let basePrompt = '';
    let aiPrompt = '';
    let currentTaskId = '';

    function setLoading(elementId, loading = true) {
        const el = document.getElementById(elementId);
        if (loading) {
            el.innerHTML = '<span class="loading">加载中...</span>';
        } else {
            el.innerHTML = '';
        }
    }

    function generatePrompt() {
        const material = document.getElementById("material").value;
        const color = document.getElementById("color").value;
        const style = document.getElementById("style").value;
        const shape = document.getElementById("shape").value;
        const holenum = document.getElementById("holenum").value;

        basePrompt = `${style}风格的${color}色${material}材质${shape}形状的${holenum}纽扣`;
        document.getElementById("promptDisplay1").textContent = basePrompt;
    }

    function generatePromptAI() {
        const basePrompt = document.getElementById("promptDisplay1").textContent;


        if (!basePrompt) {
            alert("请先生成初始描述语句");
            return;
        }

        setLoading("promptDisplay2", true);
        const chatMessage = `
    你是一名经验丰富的产品摄影师，专注于拍摄各类纽扣、饰品与布艺小物。你熟悉不同材质纽扣在自然光下的拍摄效果，能理解木质、金属、树脂、珍珠等不同纹理的呈现。在生成图片描述或图像生成 prompt 时，你会从摄影构图、光线、材质、真实感等维度做专业优化。用户给出的图片、材质、风格、颜色需求，你要结合专业摄影师视角生成符合实物拍摄风格的描述。

    我给你一些提示，你来用你丰富的经验为我生成 Prompt（英文），直接回答即可，不要出现 Prompt:。

    提示：${basePrompt}
`;

        fetch(`http://localhost:8080/llseven/ai/chat?message=${encodeURIComponent(chatMessage)}`)
            .then(response => response.text())
            .then(data => {
                aiPrompt = data;
                document.getElementById("promptDisplay2").textContent = aiPrompt;
            })
            .catch(err => {
                console.error("请求AI描述失败", err);
                document.getElementById("promptDisplay2").textContent = "获取失败";
            });
    }

    function requestImage() {
        const promptToUse = aiPrompt || basePrompt;

        if (!promptToUse) {
            alert("请先生成描述语句");
            return;
        }

        const negativePrompt = "低分辨率，错误，最差质量，低质量，比例不良";

        setLoading("taskIdDisplay", true);
        fetch(`http://localhost:8080/llseven/ai/generate-image?prompt=${encodeURIComponent(promptToUse)}&negativePrompt=${encodeURIComponent(negativePrompt)}`)
            .then(response => response.text())
            .then(taskId => {
                currentTaskId = taskId;
                document.getElementById("taskIdDisplay").textContent = taskId;
            })
            .catch(err => {
                console.error("图片请求失败", err);
                document.getElementById("taskIdDisplay").textContent = "请求失败";
            });
    }

    function getImage() {
        if (!currentTaskId) {
            alert("请先请求创建图片");
            return;
        }

        setLoading("imageUrl", true);
        fetch(`http://localhost:8080/llseven/ai/get-image?taskId=${currentTaskId}`)
            .then(response => response.text())
            .then(imageUrl => {
                document.getElementById("imageUrl").textContent = imageUrl;
                document.getElementById("previewImage").src = imageUrl;
            })
            .catch(err => {
                console.error("获取图片失败", err);
                document.getElementById("imageUrl").textContent = "获取失败";
            });
    }
</script>
</body>
</html>
